<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'新增等级'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
        <div class="analyItem">
            <p class="analyItemTit tx-center">等级</p>
            <div class="analyItemCon">
                <el-select v-model="gradeValue" placeholder="请选择等级">
                    <el-option
                        v-for="item in gradeOptions"
                        :key="item.grade"
                        :label="item.label"
                        :value="item.grade">
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">用时</p>
            <div class="analyItemCon">
                <el-input-number v-model="dayValue" :min="0" type="number"></el-input-number>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">罚款</p>
            <div class="analyItemCon">
                <el-input-number v-model="fineValue" :min="0" type="number"></el-input-number>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">积分</p>
            <div class="analyItemCon">
                <el-input-number v-model="integralValue" :min="0" type="number"></el-input-number>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">备注</p>
            <div class="analyItemCon">
                <textarea v-model="textValue" class="col-md-11"></textarea>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                 <div class="tx-center pt10 pb10">
                    <input type="button" class="uiBtn-normal uiBtn-blue" value="提交" @click="saveFineStandard()">
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
import { saveFineStandard } from '../../Resources/Api/index'
export default {
    data () {
        return {
            dayValue: 0, // 天数Value
            fineValue: 0, // 罚款Value
            integralValue: 0, // 积分Value
            textValue: '', // 文字描述
            gradeOptions: [{
                grade: 1,
                label: '一级'
            }, {
                grade: 2,
                label: '二级'
            }, {
                grade: 3,
                label: '三级'
            }],
            gradeValue: '' // 等级Value
        }
    },
    computed: {
        ...mapGetters(['leftInfo', 'updatePlate'])
    },
    created () {

    },
    methods: {
        ...mapMutations({
            setUpDatePlate: `SET_UPDATE_PLATE`
        }),
        // 保存标准
        saveFineStandard () {
            if (this.gradeValue === '') {
                this.$message('请选择等级')
                return false
            }
            if (this.dayValue === '') {
                this.$message('请输入天数')
                return false
            }
            if (this.fineValue === '') {
                this.$message('请输入罚款')
                return false
            }
            if (this.integralValue === '') {
                this.$message('请输入积分')
                return false
            }
            let params = {
                typeId: this.leftInfo.id,
                grade: Number(this.gradeValue),
                day: Number(this.dayValue),
                fine: Number(this.fineValue),
                integral: Number(this.integralValue),
                remark: this.textValue
            }
            // 查询服务项科目
            saveFineStandard({fineStandard: params}).then(results => {
                if (results.data.StatusCode === 1) {
                    this.$message('等级添加成功')
                    this.remark = ''
                    this.grade = ''
                    this.day = ''
                    this.fine = ''
                    this.integral = ''
                    this.setUpDatePlate()
                } else {
                    this.$message(results.data.StatusMsg)
                }
            }).catch(error => {
                console.log(error)
            })
        }
    }
}
</script>
